<template>
  <a-layout-header class="header">
    <div class="header-content">
      <a-menu
          mode="horizontal"
          :selectedKeys="[currentRoute]"
          class="nav-menu"
      >
        <a-menu-item key="all" @click="toggleMenu">
          <MenuOutlined/>
          全部
        </a-menu-item>
        <a-menu-item key="home">
          <router-link to="/">首页</router-link>
        </a-menu-item>
        <a-menu-item key="trading">
          <router-link to="/TradingPlatform">商城</router-link>
        </a-menu-item>
        <a-menu-item key="user">
          <router-link to="/UserCenter">个人中心</router-link>
        </a-menu-item>
      </a-menu>
    </div>
  </a-layout-header>

  <a-drawer
      :visible="showMenu"
      placement="left"
      :width="360"
      @close="closeMenu"
      class="side-menu-drawer"
  >
    <template #title>
      <div class="drawer-header">
        <router-link :to="toPath" class="greeting-message">
          {{ greetingMessage }}
        </router-link>
      </div>
    </template>
    <a-menu mode="inline" class="side-menu">
      <a-menu-item key="category1">分类 1</a-menu-item>
      <a-menu-item key="category2">分类 2</a-menu-item>
      <a-menu-item key="category3">分类 3</a-menu-item>
      <a-menu-item key="category4">分类 4</a-menu-item>
    </a-menu>
  </a-drawer>
</template>

<script setup>
import {ref, computed, watch} from 'vue';
import {useUserStore} from "@/stores/index.js";
import {useRoute} from 'vue-router';
import {MenuOutlined} from '@ant-design/icons-vue';

const showMenu = ref(false);
const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};

const userStore = useUserStore();
const route = useRoute();

const currentRoute = computed(() => {
  const path = route.path;
  if (path === '/') return 'home';
  if (path.startsWith('/TradingPlatform')) return 'trading';
  if (path.startsWith('/UserCenter')) return 'user';
  return '';
});

const toPath = computed(() => {
  return userStore.userInfo ? '/UserCenter' : '/Login';
});

const greetingMessage = computed(() => {
  return userStore.userInfo?.username ? `您好, ${userStore.userInfo.username}` : '您好, 请登录';
});

watch(() => userStore.userInfo, (newUserInfo) => {
  console.log('User Info Changed:', newUserInfo);
});

const closeMenu = () => {
  showMenu.value = false;
};

</script>

<style scoped>
.header {
  padding: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 24px;
}

.logo-link {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
  text-decoration: none;
}

.nav-menu {
  line-height: 64px;
  border-bottom: none;
}

.side-menu-drawer :deep(.ant-drawer-header) {
  background-color: #f1a4a4;
  padding: 16px 24px;
}

.drawer-header {
  display: flex;
  align-items: center;
  height: 40px;
}

.greeting-message {
  font-size: 18px;
  color: #333;
  text-decoration: none;
}

.side-menu :deep(.ant-menu-item) {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 16px;
  }

  .logo {
    margin-bottom: 16px;
  }

  .nav-menu {
    width: 100%;
  }
}

</style>

